<template>
  <div class="whole">
    <el-alert
      title="不提供修改操作，客户信息存储于链上，只能将其与祖先块断开，无法篡改其信息"
      type="warning"
      center
      show-icon
    />
    <div class="user-manager">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <div class="user-tab">
              <div class="tab-header">
                <i class="el-icon-s-custom" />
                <span>客户列表</span>
                <el-input
                  v-model="keyword"
                  size="mini"
                  placeholder="输入签名检索链上数据"
                />
                <el-button
                  icon="el-icon-search"
                  type="mini"
                  round
                  @click="handleSearch"
                />
                <el-button type="mini" round @click="drawer = true">
                  <i
                    class="iconfont icon-tianjiajiahaoyoutianjiapengyou"
                    style="font-size: 12px"
                  />
                </el-button>
              </div>
              <div class="tab-body">
                <el-table
                  v-loading="tableLoading"
                  :data="userList"
                  style="width: 100%"
                  size="small"
                  :header-cell-style="{
                    'text-align': 'center',
                    background: '#4cbb86',
                    color: '#fff',
                  }"
                  :cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column prop="id" label="编号" :width="50" />
                  <el-table-column
                    prop="signature"
                    label="数字签名"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <i class="el-icon-user-solid" />{{ scope.row.signature }}
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" :width="80">
                    <template slot-scope="scope">
                      <el-button
                        round
                        size="mini"
                        @click.native.prevent="deleteRow(scope.row)"
                      >
                        移除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <Pagination
                  v-show="total > 0"
                  layout="prev, slot, next"
                  :page-sizes="[10]"
                  :background="false"
                  :total="total"
                  :page.sync="listQuery.pageNo"
                  :limit.sync="listQuery.pageSize"
                  :small="true"
                  @pagination="getList"
                />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16" class="graph-render">
          <div class="title">
            <div>
              <i class="iconfont icon-qukuailian" />
              <span>用户区块和叔块关系图（数据量过大，不提供下载）</span>
            </div>
          </div>
          <el-card id="graph-echart" shadow="hover">
            <Graph id="graph" :key="graphFlag" ref="graph" :width="graph.width" :height="graph.height" />
          </el-card>
        </el-col>
      </el-row>

      <el-dialog :title="keyword" :visible.sync="dialogTableVisible">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-xingming" />
              真实姓名
            </template>
            {{ searchUser.realName || "???" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-nicheng" />
              小程序用户名（昵称）
            </template>
            {{ searchUser.username }}({{ searchUser.nickName || "???" }})
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon--guoji" />
              国家
            </template>
            {{ searchUser.country || "???" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-ditudangqianweizhi" />
              通讯地址
            </template>
            {{ searchUser.address || "???" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-jiguan" />
              籍贯
            </template>
            {{ searchUser.birthPlace || "???" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-hunyin" />
              是否婚配
            </template>
            {{ searchUser.maristaus || "???" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-xingbie" />
              性别
            </template>
            {{ searchUser.gender ? "女" : "男" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-gongsi" />
              所在公司
            </template>
            {{ searchUser.departmentName || "???" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-youxiang" />
              邮箱
            </template>
            {{ searchUser.email || "???" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-dianhua" />
              电话
            </template>
            {{ searchUser.phone || "???" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>
    <el-drawer size="50%" :visible.sync="drawer" title="填写添加的客户信息">
      <el-form ref="addForm" :model="addForm" label-width="100px">
        <el-form-item label="真实姓名">
          <el-input v-model="addForm.realName" />
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="addForm.phone" />
        </el-form-item>
        <el-form-item label="小程序用户名">
          <el-input v-model="addForm.username" />
        </el-form-item>
        <el-form-item label="用户密码">
          <el-input
            v-model="addForm.password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="addForm.age" />
        </el-form-item>
        <el-form-item label="是否婚配">
          <el-switch v-model="addForm.maristaus" />
        </el-form-item>
        <el-form-item label="国家">
          <el-input value="中国" :disabled="true" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="addForm.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生地">
          <el-cascader
            v-model="selectedOptions"
            size="large"
            :options="options"
            clearable
            @change="handleChange"
          />
        </el-form-item>
        <el-form-item label="通讯地址">
          <el-input v-model="addForm.address" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="hanldeCreate">立即创建</el-button>
          <el-button @click="drawer = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import '@/assets/icon/supplement/css/iconfont.css'
import { encryptByDES, decryptByDES } from '@/utils/encrypto' // 加解密
import { getClientList, delClientList, addClientList } from '@/api/customer' // 接口方法
import { regionData, codeToText } from 'element-china-area-data'
import Pagination from '@/components/Pagination'
import Graph from '@/components/Charts/userManager/Graph'
export default {
  name: 'UserManager',
  components: {
    Pagination,
    Graph
  },
  data() {
    return {
      userList: [],
      tempList: [],
      // 总页数
      total: 0,
      // 查询参数
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      addForm: {
        username: '',
        password: '',
        realName: '', // 必填项
        age: 0,
        gender: 0,
        maristatus: false,
        country: '中国',
        phone: '', // 必填项
        address: ''
      },
      searchUser: {
        realName: '',
        username: '',
        nickName: '',
        country: '',
        birthday: '',
        maristaus: '',
        gender: 0,
        departmentName: '',
        email: ''
      },
      // table loading
      tableLoading: false,
      // 数字签名加密
      key: 'w33I2XoNoidT',
      // 搜索关键字
      keyword: '',
      address: null,
      dialogTableVisible: false,
      drawer: false,
      // 处理地址级联
      options: regionData,
      selectedOptions: [],
      addtions: {},
      graph: {
        width: '0px',
        height: '0px'
      },
      graphFlag: 0
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    const gDom = document.getElementById('graph-echart')
    this.graph = {
      width: String(gDom.clientWidth) + 'px',
      height: String(gDom.clientHeight) + 'px'
    }
    this.graphFlag = new Date().valueOf()
    const obGraph = new ResizeObserver((e) => {
      const { width, height } = e[0].contentRect
      this.graph = {
        width: String(width) + 'px',
        height: String(height) + 'px'
      }
    })
    obGraph.observe(gDom)
  },
  methods: {
    getList() {
      this.graphFlag = new Date().valueOf()
      this.tableLoading = true
      getClientList(this.listQuery).then((res) => {
        if (res) {
          this.userList = res.data.rows.map((v) => {
            const signature = encryptByDES(v.id, this.key)
            v.signature = signature
            return v
          })
        }
        // this.userList = res.data.rows
        this.tempList = Array.from(this.userList)
        this.total = Number(res.data.total)
        setTimeout(() => {
          this.tableLoading = false
        }, 500)
      })
    },
    async deleteRow(row) {
      this.tableLoading = true
      const res = await delClientList(row.id)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          message: '删除成功'
        })
      } else {
        this.$notify({
          type: 'error',
          message: '呜呜呜...出错了'
        })
      }
      this.getList()
      setTimeout(() => {
        this.tableLoading = false
      }, 500)
    },
    handleSearch() {
      const id = decryptByDES(this.keyword, this.key)
      const arr = this.userList.filter((v) => v.id === id)
      this.searchUser = arr[0]
      // console.log(this.searchUser)
      this.dialogTableVisible = true
    },
    handleChange(value) {
      this.addtions.selectedOptions = value
      var name = ''
      this.selectedOptions.forEach((item) => {
        name += codeToText[item] + ' '
      })
      this.addtions.names = name
    },
    async hanldeCreate() {
      this.drawer = false
      this.addForm.birthPlace = this.addtions.names
      this.addForm.maristatus = this.addForm.maristatus === '0' ? '未婚' : '已婚'
      // console.log(this.form)
      const res = await addClientList(this.addForm)
      // console.log(res)
      if (res.code === 200) {
        this.$notify({
          message: '创建客户成功',
          type: 'success'
        })
      } else {
        this.$notify({
          message: '呜呜呜...出错了',
          type: 'error'
        })
      }
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/el-btn.scss";
@import "@/styles/scroll-bar.scss";

/*按钮悬浮*/

.user-manager {
  .el-button {
    background-color: #f8f9fb;
    border: 0.5px solid #ebebeb;
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
      rgba(17, 17, 26, 0.1) 0px 0px 8px;
  }
  @include my-el-button;
  @include my-el-input;
  margin: 10px 10px 0;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px,
    rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
  border-radius: 5px;
  height: 1000px;
  overflow: hidden;

  .user-tab {
    padding: 0 5px;
    .tab-header {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        margin-right: 5px;
        font-size: 12px;
        font-weight: 700;
        overflow: hidden; /*自动隐藏文字*/
        text-overflow: ellipsis; /*文字隐藏后添加省略号*/
        white-space: nowrap; /*强制不换行*/
      }
      .el-input {
        width: 170px;
      }
      .el-button {
        margin-left: 3px;
      }
    }
    .tab-body {
      margin-top: 10px;
      .el-table {
        border-radius: 8px;
      }

      @include my-scroll-bar;
      .pagination-container {
        padding: 0;
        width: 100%;
        text-align: center;
        // 修改分页箭头
        ::v-deep .btn-prev {
          .el-icon-arrow-left::before {
            content: "\e6ea" !important;
          }
        }
        ::v-deep .btn-next {
          .el-icon-arrow-right:before {
            content: "\e6e9" !important;
          }
        }
      }
    }
  }

  ::v-deep .graph-render {
    #graph-echart {
      height: 600px;
      .el-card__body {
        padding: 0;
        width: 100%;
        height: 100%;
      }
    }
    height: 600px;
  }
}
.el-drawer {
  .el-input {
    width: 80%;
  }
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  i {
    width: 10px;
    vertical-align: middle;
  }
  span {
    font-weight: bold;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
